/*
  hooks是16.8版本推出的

  hooks只能给函数组件用
  内置hooks增强了函数组件的功能，比如说可以给函数组件去添加state和生命周期等
  自定义的hooks(类似于vue的组合式api)，功能的聚合和逻辑复用
  比如高阶组件，hooks不会使组件层级变深
*/

import React, { useState } from "react";
// useState是用于给函数组件使用state的

const App = () => {
  // hooks都必须在函数组件的顶层调用
  // 变量以及改变变量的方法
  // 改变变量的方法，可以传入一个值或者一个函数
  // 改变变量的方法是异步执行的
  const [count, setCount] = useState(3);
  const handleClick = () => {
    setCount((v) => v + 1);
    // console.log(count);
  };

  const [name, setName] = useState("zhangsan");
  const handleClick2 = () => {
    setName("lisi");
  };

  return (
    <>
      <h2>useState</h2>
      <p>count: {count}</p>
      <button onClick={handleClick}>count++</button>
      <p>name: {name}</p>
      <button onClick={handleClick2}>btn</button>
    </>
  );
};

export default App;
